<template>
  <view class="background">
    <view class="first-container">
      <view>分类</view>
      <select  v-model="uploadForm.category" name="category" id="category" style="width: 95%;height: 40px;border-radius: 5px;border: 1px solid #cccccc">
        <option value="" disabled selected>请选择分类</option>
        <option value="1">案例</option>
        <option value="2">文献资料</option>
        <option value="3">课件</option>
        <option value="4">作业</option>
      </select>
      <view>标题</view>
      <input type="text" placeholder="标题" v-model="uploadForm.title">
      <view>内容</view>
      <textarea name="" id="" cols="30" rows="10" placeholder="请输入内容" v-model="uploadForm.description"></textarea>
      <view>文件</view>
      <view>
        <u-button style="width: 160rpx;font-size: 14px;" type="primary" @click="chooseAndUploadImage">点击上传</u-button>
       <p v-if="uploadForm.filePath" @click=" downloadFile" style="color: #2b85e4;font-weight: lighter;">点此下载</p>
      </view>
    </view>
    <view style="display: flex;margin-top: 60rpx;">
      <button class="button" @click="upload">上传</button>
    </view>
  </view>
</template>

<script>
import store from '@/store/index.js'
import {LearningResourcesForm, LearningResourcesUpdateForm} from "../../api/teacher/type";
import teacher from "../../api/teacher";

export default {
  data() {
    return {
      uploadForm: {
        title: LearningResourcesForm.title,
        description: LearningResourcesForm.description,
        category: LearningResourcesForm.category,
        filePath: LearningResourcesForm.filePath
      }

    }
  },
  onLoad() {

  },

  methods: {
    downloadFile() {
      const link = document.createElement('a');
      link.href = this.uploadForm.filePath;
      link.download = this.getFileNameFromUrl(this.uploadForm.filePath) // 设置下载文件名

      // 触发点击事件
      document.body.appendChild(link);
      link.click();

      // 清理
      document.body.removeChild(link);
    },
    getFileNameFromUrl(url) {
      // 从 URL 中提取文件名
      const urlParts = url.split('/');
      return urlParts[urlParts.length - 1];
    },
    async chooseAndUploadImage() {
      try {
        // 显示加载提示
        uni.showLoading({
          title: '正在选择文件',
          mask: true
        });

        // 使用 uni.chooseImage 选择图片
        const chooseRes = await uni.chooseImage({
          count: 1, // 允许选择的图片数量
        });
        console.log('chooseRes',chooseRes)
        console.log('路径',chooseRes[1].tempFilePaths[0])
        // if (tempFilePaths.length === 0) {
        //   console.warn('没有选择任何文件');
        //   return;
        // }

        // 使用 uni.uploadFile 上传图片
        const uploadRes = await this.uploadFile(chooseRes[1].tempFilePaths[0]);

        // 设置图片 URL 到 data 中
        this.uploadForm.filePath= uploadRes.data
        console.log('阿里云下载路径：',this.uploadForm.filePath)

        // 隐藏加载提示
        uni.hideLoading();
        uni.showToast({
          title: '文件上传成功',
          icon: 'success'
        });
      } catch (error) {
        console.error('处理上传文件时发生错误:', error);
        uni.hideLoading();
        uni.showToast({
          title: '处理上传文件时发生错误',
          icon: 'none'
        });
      }
    },
    async uploadFile(filePath) {
      try {
        // 显示加载提示
        uni.showLoading({
          title: '正在上传文件',
          mask: true
        });

        // 调用 uni.uploadFile 上传图片
        const res = await new Promise((resolve, reject) => {
          uni.uploadFile({
            url: 'http://localhost:8185/news/uploadImage', // 开发者服务器 url
            filePath: filePath, // 要上传文件资源的路径
            name: 'file', // 文件对应的 key
            success: (uploadRes) => {
              resolve(uploadRes);
            },
            fail: (err) => {
              reject(err);
            }
          });
        });

        // 解析 JSON 响应
        const responseData = JSON.parse(res.data);

        if (responseData.code == 200) {
          return responseData; // 返回解析后的响应数据
        } else {
          throw new Error(`上传失败: ${responseData}`);
        }
      } catch (error) {
        console.error('上传文件失败:', error);
        throw error;
      } finally {
        // 确保隐藏加载提示
        uni.hideLoading();
      }
    },

    //上传教学资源
    async upload() {

      try {
          uni.showModal({
            content: '确认上传资源？',
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            success: (res) => {
              if (res.confirm) {
                teacher.uploadResource(this.uploadForm);
                this.showToast('上传成功，请等待管理员审核！');
                // 在 toast 显示完毕后进行页面跳转
                setTimeout(() => {
                  uni.switchTab({
                    url: '/pages/resource/resource', // 跳转的目标页面路径
                  });
                }, 1000); // 等待 toast 持续时间（1秒）
              } else {
                uni.showToast({
                  title: '上传失败',
                  icon: 'none',
                  duration: 1000
                });
              }
            }
          });
      } catch (e) {
        return await Promise.reject(e)
      }
    },
    showToast(message) {
      uni.showToast({
        title: message,
        icon: 'success',
        duration: 1000,
        mask: true
      });
    },
  }
}
</script>

<style >
.background {
  height: 100vh; /* 使背景占满整个视口高度 */
  width: 100%;
  background: white;
  flex-direction: column; /* 使子元素垂直排列 */
  display: flex;
  align-items: center; /* 垂直居中 */

}

.first-container {
  width: 90%;
  max-width: 400px; /* 可选：设置最大宽度 */
  margin: 0 auto; /* 水平居中 */
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  gap: 10px; /* 设置子元素之间的间距 */
}

.first-container > view {
  font-weight: bold;
  font-size: 14px;
}

.first-container > input {
  width: 90%; /* 输入框宽度占满容器 */
  height: 40px; /* 输入框高度 */
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 10px; /* 内边距 */
  font-size: 14px;
}

.first-container > textarea {
  width: 90%; /* 文本域宽度占满容器 */
  min-height: 100px; /* 最小高度 */
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px; /* 内边距 */
  font-size: 14px;
  resize: vertical; /* 允许垂直调整大小 */
}

.button {
  border: 0;
  background-color: #409EFF;
  color: white;
  width: 180rpx;
  font-size: 14px;
}
</style>